<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片管理</title>
		
		<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"></link>
		<link href="css/foodstyle.css" rel="stylesheet" type="text/css"></link>
        <link href="css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />	
	    	<link href="component/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
	    <script src="js/fileinput.min.js" type="text/javascript"></script>
        <script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
	</head>
	<body>
	
      <div id="page-wrapper">
	 	 <form role="form" class="form-horizontal">
	       <input id="fileImage" type="file" multiple="true">
	       
	       <div class="form-group" style="margin-top: 15px">
		      <div class="col-xs-offset-4">
		         <button type="submit" class="btn btn-primary" id="uploadImage">上传图片</button>
		         <button type="button" class="btn btn-default" id="closeWindow">关闭窗口</button>
		      </div>
	       </div>
		 </form>
	  </div>
	  
	  <script>
		$("#fileImage").fileinput({
			language:'zh',
			uploadUrl:'index.html',
			showUpload:true,
			showCaption: true,
			browseClass: "btn btn-primary",
			dropZoneEnabled: true,//是否显示拖拽区域
		    allowedFileExtensions: ['jpg', 'bmp', 'png'],//接收的文件后缀
	        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
	        maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true
		});
		
	    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
		$("#fileImage").on("fileuploaded", function (event, data, previewId, index) {
			 parent.layer.close(index);
		});
		
		 //给父页面传值
		$('#uploadImage').on('click', function(){
		    parent.layer.msg("上传图片成功！");
		    parent.layer.close(index);
		});
		
		$('#closeWindow').on('click', function(){
		    parent.layer.close(index);
		});
	 </script>
	</body>
</html>
